<!-- 首页 -->
<template>
  <div>
    <!-- 导航栏 -->
    <div class="home">
      <!-- 搜索框 -->
      <!-- <van-search  show-action  placeholder="搜索课程" >
        <template #action>
          <div style="font-size: 14px; color: #4c4c4c; font-weight: bold; position: relative; left:8px">我的课程</div>
        </template>
      </van-search> -->
      <!-- 导航栏 -->
      <div class="s30153804">
        <span class="s-3613cfc6" style="float: left">
          <img class="s-6a5cf0dc" src="../assets/NavPic/add.jpg" alt="" />
        </span>
        <span class="s-3613cfc6" style="float: right">
          <img class="s-6a5cf0dc" src="../assets/NavPic/more.jpg" alt="" />
        </span>
        <div class="s2cbb1229">
          <div class="s-6d66b116">
            <span class="s-22e5de74">
              <img alt="" src="../assets/NavPic/search.jpg" class="s-34f4f4a1" />
            </span>
            <span class="s-2e06c129">搜索食谱/食材，烘焙/家常菜一应俱全</span>
            <input class="s-362be723" />
          </div>
        </div>
      </div>
      <div class="s7e1f0f36"></div>
      <!-- 分类导航 -->
      <!-- <van-tabs>
        <van-tab v-for="(index, i) in 8" :key="i" :title="'标签 ' + index"></van-tab>
      </van-tabs> -->
    </div>
    <!-- 图标栏 -->
    <div class="s6eb61d30" style="margin: 0px">
      <div class="s3d331c4f">
        <div class="s-27f7c911" v-for="item in icon" :key="item.id">
          <div class="s77141dbd">
            <img alt="" title="" :src="item.img" class="s-34f4f4a1" />
          </div>
          <div class="s622416cd">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 轮播 -->
    <!-- <van-swipe :autoplay="3000" indicator-color="red" class="lb">
      <van-swipe-item class="lbz" v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="lbtp" />
      </van-swipe-item>
    </van-swipe> -->

    <div class="zht">
      <!-- 横排展示 -->
      <van-cell-group>
        <van-cell value="查看全部">
          <template #title>
            <span class="custom-title">元气早餐</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <!-- 在学人数 -->
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <!-- 描述文字 -->
            <div class="miaoshu">皮薄汁多馅料美： 秒杀狗不理包子的[完美灌汤包]</div>
          </div>
        </div>

        <van-cell value="查看全部">
          <template #title>
            <span class="custom-title">私房必做</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <div class="miaoshu">低糖低脂代餐极: 5款爆款手工软欧包</div>
          </div>
        </div>

        <van-cell value="查看全部">
          <template #title>
            <span class="custom-title">下午茶时光</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <div class="miaoshu">低糖低脂代餐极: 5款爆款手工软欧包</div>
          </div>
        </div>

        <van-cell value="查看全部">
          <template #title>
            <span class="custom-title">基础经典</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <div class="miaoshu">低糖低脂代餐极: 5款爆款手工软欧包</div>
          </div>
        </div>

        <van-cell value="查看全部">
          <template #title>
            <span class="custom-title">技法装饰</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <div class="miaoshu">低糖低脂代餐极: 5款爆款手工软欧包</div>
          </div>
        </div>

        <van-cell>
          <template #title>
            <span class="custom-title">亦爱料理</span>
          </template>
        </van-cell>
        <div class="tp">
          <div v-for="(item, index) in imgList" :key="index" class="ttp">
            <img :src="item.img" alt="" />
            <div class="rs">
              <span>1000+</span>
              <span>在学</span>
            </div>
            <div class="miaoshu">低糖低脂代餐极: 5款爆款手工软欧包</div>
          </div>
        </div>
      </van-cell-group>

      <!-- 灰色分隔线 -->
      <hr style="border: 5px solid rgb(240, 240, 240)" />

      <van-empty class="custom-image" :image="require('../assets/avatar/1.jpg')" description="没有你想学的课程？">
        <van-button plain type="warning" class="bottom-button">点此告诉我们</van-button>
      </van-empty>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
// import { Lazyload } from 'vant'
// Vue.use(Lazyload)
export default {
  data() {
    return {
      imgList: [
        // 描述图
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
        { img: require('../assets/avatar/1.jpg') },
      ],
      images: [
        // 轮播图
        'https://image.hongbeibang.com/FsPytummH00pZBaei_Mlt5vZlHdH?1380X700&imageView2/1/w/750/h/380',
        'https://image.hongbeibang.com/FsPytummH00pZBaei_Mlt5vZlHdH?1380X700&imageView2/1/w/750/h/380',
        'https://image.hongbeibang.com/FsPytummH00pZBaei_Mlt5vZlHdH?1380X700&imageView2/1/w/750/h/380',
        'https://image.hongbeibang.com/FsPytummH00pZBaei_Mlt5vZlHdH?1380X700&imageView2/1/w/750/h/380',
        'https://image.hongbeibang.com/FsPytummH00pZBaei_Mlt5vZlHdH?1380X700&imageView2/1/w/750/h/380',
      ],
      icon: [
        { id: 1, img: require('../assets/IconBar/icon1.jpg'), name: '技巧百科' },
        { id: 2, img: require('../assets/IconBar/icon2.jpg'), name: '视频学堂' },
        { id: 3, img: require('../assets/IconBar/icon3.jpg'), name: '新手教程' },
        { id: 4, img: require('../assets/IconBar/icon4.jpg'), name: '食谱分类' },
      ],
    }
  },
}
</script>
<style>
img {
  border: 0;
}
/* 导航栏 */
.s7e1f0f36 {
  height: 44px;
  overflow: hidden;
  zoom: 1;
}
.s30153804 {
  background: #ffffff;
  height: 44px;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  margin: 0 auto;
  max-width: 600px;
  box-sizing: border-box;
}
.s-3613cfc6 {
  font-size: 0;
  height: 44px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 1;
}
.s2cbb1229 {
  text-align: left;
  height: 35px;
  margin: 4.5px 45px;
}
.s-6a5cf0dc {
  width: 27px;
  height: 27px;
  margin: 9.5px 0;
}
.s-6d66b116 {
  height: 100%;
  margin: 0 auto;
  border-radius: 4px;
  zoom: 1;
  background-color: #f5f7f9;
  box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.s-22e5de74 {
  display: inline-block;
  width: 18px;
  margin-right: 10px;
  vertical-align: middle;
  font-size: 0;
}
.s-34f4f4a1 {
  width: 100%;
  overflow: hidden;
}
.s-2e06c129 {
  color: #999999;
  font-size: 12px;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.s-362be723 {
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
/* 图标栏 */
.s6eb61d30 {
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
  zoom: 1;
  background-color: #ffffff;
}
.s3d331c4f {
  font-size: 0;
  letter-spacing: 0.5px;
  zoom: 1;
  margin: 0;
  background-color: #ffffff;
}
.s-27f7c911 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  width: 25%;
  font-size: 0;
  padding: 10px 0;
}
.s77141dbd {
  display: inline-block;
  width: 45px;
  height: 45px;
  font-size: 0;
  overflow: hidden;
}
.s622416cd {
  font-size: 12px;
  color: #4a4945;
  margin-top: 5px;
  line-height: 16px;
}
.s-34f4f4a1 {
  width: 100%;
  overflow: hidden;
}
/* 搜索框&分类导航外层 */
/* .home {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  top: 0;
  z-index: 9999;
  position: fixed;
  width: 100%;
} */
/* 搜索框 */
.van-search {
  /* display: -webkit-box; */
  padding: 10px 17px;
  width: 100%;
}
/* 框内样式 */
.van-search__content {
  background-color: #f0f0ef;
  padding: 0 12px;
}
/* 搜索图标颜色 */
.van-cell {
  color: #999999;
}
/* 分类导航 */
.van-tabs {
  position: relative;
  top: 0px; /* 紧贴上面 */
  width: 100%;
}

/* 轮播 */
.lb {
  top: 99px;
  height: 156px;
  margin-bottom: 20px;
}
.lbz {
  display: flex;
  justify-content: center;
}
.lbtp {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  margin: 0 17px;
}

/* 后面主体 */
.zht {
  position: relative;
  /* top: 99px; */
}

/* 横排展示 */
.van-tabs__line {
  /* position: absolute; */
  bottom: 21px;
  /* left: 0; */
  width: 20px;
  height: 3px;
  background-color: #ff3508;
  border-radius: 3px;
}

/* 去掉细线 */
/* 细线原因未知 */
.van-hairline--top-bottom::after {
  border-width: 0;
}
.van-cell::after {
  border-bottom: 0px solid #ffffff;
}

.tp {
  display: flex;
  overflow: auto;
  padding: 0 12px;
  margin-bottom: 26px;
}
/* 横排标题 */
.custom-title {
  font-size: 17px;
  color: #313131;
  vertical-align: middle;
  font-weight: bold;
}

/* 去掉下面滚动条 */
.tp::-webkit-scrollbar {
  display: none;
}

.ttp {
  margin: 0 5px;
  position: relative;
}
.ttp > img {
  border-radius: 4px;
  width: 164px;
}

/* 在学人数 */
.rs {
  position: absolute;
  left: 0;
  bottom: 54px;
  font-size: 11px;
  margin: 0 10px;
  padding: 2px 4px;
  border-radius: 2px;
  overflow: hidden;
  color: #4a4945;
  background-color: #fff;
}

/* 描述 */
.miaoshu {
  color: #4a4945;
  font-weight: bold;
  font-size: 15px;
  line-height: 20.25px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 空状态图片大小 */
.custom-image .van-empty__image {
  width: 60px;
  height: 50px;
}

/* 页尾按钮 */
.bottom-button {
  display: flex;
  justify-content: center;
  width: 134px;
  height: 36px;
  margin-top: -24px;
}
</style>
<style lang="scss" scoped></style>
